<template>
  <div id="dashboard-editor-container" class="app-container res clearfix displayFlex flexSit space_betweens spaceSize dasAutoSlight unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop bokAutoIn cfotkop animations auto_m res reses">
      <div class="scsjBox mt20 displayFlex flexSit space_betweens spaceSize res resesx reses">
        <div class="titleBgStyle displayFlex flexSit abs autoPos absesx"></div>
        <div class="moduleTitle displayFlex flexSit space_betweens">生产数据</div>
        <div class="dataNum clearfix displayFlex flexSit space_betweens spaceSize">
          <div class="dataNum_lie clearfix displayFlex flexSit flo_l space_beens space_between space_betweens">
            <div class="dataNum_lie_left clearfix displayFlex flexSit">
              <img :src="require('@/assets/common/images/xsze_icon.png')" alt="">
            </div>
            <div class="dataNum_lie_right clearfix displayFlex flexSit">
              <div>销售总额（万元）</div>
              <div>{{scData.xszeNum}}</div>
            </div>
          </div>
          <div class="dataNum_lie clearfix displayFlex flexSit flo_l space_beens space_between space_betweens">
            <div class="dataNum_lie_left clearfix displayFlex flexSit">
              <img :src="require('@/assets/common/images/xsywc_icon.png')" alt="">
            </div>
            <div class="dataNum_lie_right clearfix displayFlex flexSit">
              <div class="nowrap">销售已完成（万元）</div>
              <div>{{scData.xsywcNum}}</div>
            </div>
          </div>
          <div class="dataNum_lie clearfix displayFlex flexSit flo_l space_beens space_between space_betweens">
            <div class="dataNum_lie_left clearfix displayFlex flexSit">
              <img :src="require('@/assets/common/images/gdsl_icon.png')" alt="">
            </div>
            <div class="dataNum_lie_right clearfix displayFlex flexSit">
              <div>工单数量</div>
              <div>{{scData.gdslNum}}</div>
            </div>
          </div>
          <div class="dataNum_lie clearfix displayFlex flexSit flo_l space_beens space_between space_betweens">
            <div class="dataNum_lie_left clearfix displayFlex flexSit">
              <img :src="require('@/assets/common/images/bgsl_icon.png')" alt="">
            </div>
            <div class="dataNum_lie_right clearfix displayFlex flexSit">
              <div>报工数量</div>
              <div>{{scData.bgslNum}}</div>
            </div>
          </div>
          <div class="dataNum_lie clearfix displayFlex flexSit flo_l space_beens space_between space_betweens">
            <div class="dataNum_lie_left clearfix displayFlex flexSit">
              <img :src="require('@/assets/common/images/bgzl_icon.png')" alt="">
            </div>
            <div class="dataNum_lie_right clearfix displayFlex flexSit">
              <div>报工质检数量</div>
              <div>{{scData.BgzjNum}}</div>
            </div>
          </div>
        </div>
        <div class="timeRange abs absesx bokAutoIn cnimaLoop bokAutoIn cfotkop animations">
          <span v-for="(item,index) in timeList" :key="index" :class="{selected:index == timeIndex}" @click="timeRangeClick(index)">{{item}}</span>
        </div>
      </div>
      <section class="waiSection betweenBoxes spaceSize dasAutoSlight unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop bokAutoIn space_betweens space_between spaceSize">
         <div class="scjdSection_left unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop bokAutoIn res resesx reses">
            <div class="titleBgStyle displayFlex flexSit abs autoPos absesx"></div>
            <div class="moduleTitle displayFlex flexSit space_betweens">生产进度</div>
            <el-table
              :data="tableData"
              height="400"
              style="width: 100%">
              <el-table-column
                prop="workorderCode"
                label="工单编号"
                :show-overflow-tooltip="true"
                width="150">
              </el-table-column>
              <el-table-column
                prop="workorderName"
                label="工单名称"
                :show-overflow-tooltip="true"
                width="140">
              </el-table-column>
              <el-table-column
                prop="ganttDataList"
                label="工单进度"
                width="380">
                <template slot-scope="scope">
                  <div v-if="scope.row.ganttDataList.length > 0">
                    <div class="betweenBoxes spaceSize dasAutoSlight unitKind allInRoll cnimaLoop space_betweens space_beens">
                      <div v-for="(item,index) in scope.row.ganttDataList" :key="index" style="width:24%;margin-right:1%" class="res resesx reses flo_l">
                        <el-tooltip placement="bottom" :content="'工序:'+item.process+' 产品名称:'+item.product+' 完成比列:'+((item.progress*100)<=100?(item.progress*100):100)+'%'">
                          <el-progress :text-inside="true" :stroke-width="16" :percentage="(item.progress*100)<=100?(item.progress*100):100" :color="item.color"></el-progress>
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="productName"
                width="150"
                :show-overflow-tooltip="true"
                label="产品名称">
              </el-table-column>
              <el-table-column
                prop="productCode"
                label="产品编号"
                width="140"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                prop="productSpc"
                label="规格型号"
                width="140"
                :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column
                prop="unitOfMeasure"
                label="单位">
              </el-table-column>
              <el-table-column
                prop="requestDate"
                width="100"
                label="日期"
                :show-overflow-tooltip="true">
              </el-table-column>
            </el-table>
            <div v-if="false" class="pageBox">
              <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                @current-change="handleCurrentChange">
              </el-pagination>
            </div>
         </div>
         <div class="scjdSection_right unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop bokAutoIn res resesx reses">
            <div class="titleBgStyle displayFlex flexSit abs autoPos absesx"></div>
            <div class="moduleTitle displayFlex flexSit space_betweens">快捷入口</div>
            <div class="shortcut_box displayFlex flexSit space_between_wrap space_beens unit_auto_size">
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/caigou/plan">
                       <img src="../assets/common/images/cgjh_icon.png" alt="">
                       <div>采购计划</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/xs/order">
                       <img src="../assets/common/images/xsdd_icon.png" alt="">
                       <div>销售订单</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/mes/pro/planning">
                       <img src="../assets/common/images/scgd_icon.png" alt="">
                       <div>生产计划</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/mes/qc/iqc">
                       <img src="../assets/common/images/lljy_icon.png" alt="">
                       <div>来料检验</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/mes/qc/oqc">
                       <img src="../assets/common/images/chjy_icon.png" alt="">
                       <div>出货检验</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/mes/pro/productrecpt">
                       <img src="../assets/common/images/cprk_icon.png" alt="">
                       <div>产品入库</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/caigou/itemrecpt">
                       <img src="../assets/common/images/cgrk_icon.png" alt="">
                       <div>采购入库</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/mes/pro/issue">
                       <img src="../assets/common/images/scll_icon.png" alt="">
                       <div>生产领料</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/mes/pro/feedback">
                       <img src="../assets/common/images/scbg_icon.png" alt="">
                       <div>生产报工</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/mes/qc/pendinginspect">
                       <img src="../assets/common/images/cgjh_icon.png" alt="">
                       <div>报工质检</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/mes/pro/task">
                       <img src="../assets/common/images/bgzj_icon.png" alt="">
                       <div>生产任务</div>
                 </router-link></div>
                 <div class="shortcut_box_lie displayFlex flexSit"><router-link to="/mes/pro/proroute">
                       <img src="../assets/common/images/gylc_icon.png" alt="">
                       <div>工艺流程</div>
                 </router-link></div>
            </div>
         </div>
      </section>
      <section class="waiSection mt40 betweenBoxes spaceSize dasAutoSlight unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop bokAutoIn space_betweens space_between spaceSize">
        <div class="xsthbBox xstbBox dasAutoSlight unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop res resesx reses">
          <div class="moduleTitle displayFlex flexSit space_betweens">销售同比环比</div>
          <div id="echartsBoxXstb" class="xstbBox dasAutoSlight unitKind allInRoll cnimaLoop"></div>
          <div class="titleBgStyle displayFlex flexSit abs autoPos absesx"></div>
        </div>
        <div class="xsthbBox xshbBox dasAutoSlight unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop res resesx reses">
          <div class="moduleTitle displayFlex flexSit space_betweens">采购同比环比</div>
          <div id="echartsBoxXshb" class="xstbBox dasAutoSlight unitKind allInRoll cnimaLoop"></div>
          <div class="titleBgStyle displayFlex flexSit abs autoPos absesx"></div>
        </div>
      </section>
      <section class="waiSection mt40 betweenBoxes spaceSize dasAutoSlight unitKind allInRoll cnimaLoop bokAutoIn cnimaLoop bokAutoIn space_betweens space_between spaceSize">
          <div class="echartsFour displayFlex flexSit space_betweens dasAutoSlight unitKind allInRoll cnimaLoop bokAutoIn space_between">
            <div class="echartsFour_lie displayFlex flexSit space_betweens dasAutoSlight unitKind allInRoll cnimaLoop res resesx">
              <div class="titleBgStyle displayFlex flexSit abs autoPos absesx"></div>
              <div class="moduleTitle displayFlex flexSit space_betweens">缺陷占比</div>
              <div id="qxzbEchartsBox" style="margin-top:15px"></div>
              <div class="timeRange abs absesx bokAutoIn cnimaLoop bokAutoIn cfotkop animations" style="right:23px;top: 70px;transform:scale(0.8)">
                  <span v-for="(item,index) in timeList" :key="index" :class="{selected:index == qxzbTimeIndex}" @click="qxzbTimeClick(index)">{{item}}</span>
                </div>
            </div>
            <div class="echartsFour_lie displayFlex flexSit space_betweens dasAutoSlight unitKind allInRoll cnimaLoop res resesx">
              <div class="titleBgStyle displayFlex flexSit abs autoPos absesx"></div>
              <div class="moduleTitle displayFlex flexSit space_betweens">工序不合格比列</div>
              <div id="gxbhgEchartsBox" style="margin-top:15px"></div>
              <div class="timeRange abs absesx bokAutoIn cnimaLoop bokAutoIn cfotkop animations" style="right:23px;top: 70px;transform:scale(0.8)">
                  <span v-for="(item,index) in timeList" :key="index" :class="{selected:index == gxbhgTimeIndex}" @click="gxbhgTimeClick(index)">{{item}}</span>
                </div>
            </div>
            <div class="echartsFour_lie displayFlex flexSit space_betweens dasAutoSlight unitKind allInRoll cnimaLoop res resesx">
              <div class="titleBgStyle displayFlex flexSit abs autoPos absesx"></div>
              <div class="moduleTitle displayFlex flexSit space_betweens">生产质量统计</div>
              <div id="sczlEchartsBox"></div>
            </div>
            <div class="echartsFour_lie displayFlex flexSit space_betweens dasAutoSlight unitKind allInRoll cnimaLoop res resesx">
              <div class="titleBgStyle displayFlex flexSit abs autoPos absesx"></div>
              <div class="moduleTitle displayFlex flexSit space_betweens" style="margin-bottom:21px">通知公告</div>
              <div id="tzggBox" class="dasAutoSlight unitKind allInRoll res resex">
                <div class="timeRange abs absesx bokAutoIn cnimaLoop bokAutoIn cfotkop animations" style="right:-2px;top: -62px;transform:scale(0.8)">
                  <span v-for="(item,index) in tzggList" :key="index" :class="{selected:index == tzggIndex}" @click="tzggClick(index)">{{item}}</span>
                </div>
                <div v-show="tzggIndex == 0" class="tzggBox_lie dasAutoSlight unitKind">
                  <div v-for="(item,index) in tzggMesList" :key="index" class="tzggBox_lie_text space_between dasAutoSlight unitKind allInRoll">
                    <span class="tz">通知</span>
                    <strong class="nowrap" :title="item.noticeTitle">{{item.noticeTitle}}</strong>
                  </div>
                </div>
                <div v-show="tzggIndex == 1" class="tzggBox_lie dasAutoSlight unitKind">
                  <div v-for="(item,index) in tzggMesList" :key="index" class="tzggBox_lie_text space_between dasAutoSlight unitKind allInRoll">
                    <span class="gg">公告</span>
                    <strong class="nowrap" :title="item.noticeTitle">{{item.noticeTitle}}</strong>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </section>

  </div>
</template>

<script>
import echarts from 'echarts'
import $ from 'jquery'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import request from '@/utils/request'


export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
        loading: true,
        queryParams: {status:'CONFIRMED'},
        workorderList: [],
        tzggList:["通知","公告"],
        tzggIndex:0,
        tzggMesList:[],
        gxbhgTimeIndex:0,
        qxzbTimeIndex:0,
        scData: {
          xszeNum:0,
          xsywcNum:0,
          gdslNum:0,
          BgzjNum:0,
          bgslNum:0
        },
        timeList: ['今天','昨天','最近7天','最近30天'],
        timeIndex: 0,
        pageSize:9,
        total:0,
        tableData: [/*{
            number: 'JRG1R5EG1',
            name: '新产品工单',
            progress: '80',
            proName:"新产品02",
            proNumber:"fgbs6854",
            ggxh:"红色",
            unit:'个',
            date:"2016-05-04"
          }*/]
    }
  },
  created(){
  },
  mounted() {
    //生产数据初始化
    this.timeRangeClick(0);
    //销售额
    this.getXszeNum();
    //工单数量
    this.getGdslNum();
    //生产进度表
    this.getScjdTableData();
    //报工质检数量
    this.getBgzjNum();
    this.tbEchartsInit();
    this.hbEchartsInit();
    this.gxbhgEchartsInit();
    //缺陷占比
    this.qxzbInit();
    //工序不合格
    this.gxbhgInit();
    //生产质量统计
    this.sczltjInit();
    //通知公告
    this.getNotice(1);
  },
  methods: {
    qxzbTimeClick(index){
      this.qxzbTimeIndex = index;

      let timeFlag = "";
      if(index == 0){
        timeFlag = "today";
      }else if(index == 1){
        timeFlag = "yesterday";
      }else if(index == 2){
        timeFlag = "week";
      }else if(index == 3){
        timeFlag = "month";
      }

      this.qxzbInit(timeFlag);
    },
    gxbhgTimeClick(index){
      this.gxbhgTimeIndex = index;

      let timeFlag = "";
      if(index == 0){
        timeFlag = "today";
      }else if(index == 1){
        timeFlag = "yesterday";
      }else if(index == 2){
        timeFlag = "week";
      }else if(index == 3){
        timeFlag = "month";
      }

      this.gxbhgInit(timeFlag);

    },
    tzggClick(index){
      this.tzggMesList = [];
      this.tzggIndex = index;
      this.getNotice(index+1);
    },
    getNotice(type){
       request({
        url: '/system/notice/list',
        method: 'get',
        params:{
          pageNum:1,
          pageSize:10,
          noticeType:type
        }
      }).then(res => {
        this.tzggMesList = res.rows;
      });
    },
    sczltjInit(){
      request({
        url: '/sale/order/quality',
        method: 'get'
      }).then(res => {
        let datax = [];
        let datay = [];
        res.data.forEach(item => {
          datax.push(item.date);
          datay.push(item.num);
        });
        this.sczlthEchartsInit(datax, datay);
      });
    },
    gxbhgInit(query="today"){
      request({
        url: '/sale/order/getProcessPercentage',
        method: 'get',
        params: {"range":query}
      }).then(res => {
        let dataArray = []
        if(res.data == null || res.data.length == 0){
          dataArray.push({
            name:"暂无数据",
            value:0
          })
        }else{
          res.data.forEach(item => {
            dataArray.push({
              name:item.name,
              value:item.num
            })
          });
        }
        this.gxbhgEchartsInit(dataArray);
      });
    },
    qxzbInit(query="today"){
       request({
        url: '/sale/order/getDefectPercentage',
        method: 'get',
        params: {"range":query}
      }).then(res => {
        let dataArray = []
        if(res.data == null || res.data.length == 0){
          dataArray.push({
            name:"暂无数据",
            value:0
          })
        }else{
          res.data.forEach(item => {
            dataArray.push({
              name:item.name=="MAJ"?"严重缺陷":item.name=="MIN"?"轻微缺陷":item.name=="CR"?"致命缺陷":item.name,
              value:item.num
            })
          });
        }
        this.qxzbEchartsInit(dataArray);
      });
    },
    sczlthEchartsInit(datax,datay){
       let chartDom = document.getElementById('sczlEchartsBox');
       let myChart = echarts.init(chartDom);
       let option = {
          tooltip:{
            show:true
          },
          xAxis: {
              axisLine: {
                lineStyle:{
                  color: '#fff'
                }
              },
              axisLabel:{
                color: '#4E5969'
              },
              type: 'category',
              data: datax
              //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value',
              axisLabel:{
                color: '#4E5969'
              },
              axisLine: {
                lineStyle:{
                  color: '#fff'
                }
              }
          },
          series: [{
              data: datay,
              // data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar',
              barWidth: 18,
              itemStyle: {
                  barBorderRadius: [10, 10, 10, 10],
                  color:"#21CCFF"
              }
          }]
      };
       option && myChart.setOption(option);

      $(document).ready(function() {
        myChart.resize()
      });
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },
    gxbhgEchartsInit(dataArray){
       let chartDom = document.getElementById('gxbhgEchartsBox');
       let myChart = echarts.init(chartDom);
       let option = {
            title: {
                x: 'center',
                y: 'center',
                textStyle: {
                    fontSize: 20
                }
            },
            grid: {
                top: '20%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item'
            },
            color: [
                '#58b2ff', '#68d4b2', '#7380ff', '#fdd56a', '#fdb36a', '#fd866a', '#9e87ff'
            ],
            series: [{
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['30%', '48%'],
                clockwise: true,
                avoidLabelOverlap: true,
                hoverOffset: 15,
                itemStyle: {
                    normal: {

                    }
                },
                label: {
                    show: true,
                    normal:{
                      color:"#4E5969"
                    },
                    position: 'outside',
                    formatter: '{a|{b}：{d}%}\n{hr|}',
                    rich: {
                        a: {
                            padding: [0,0,-10,0]
                        }
                    }
                },
                labelLine: {
                    normal: {
                        length: 20,
                        length2: 30,
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                data:dataArray
                // data: [{
                //     'name': '数据1',
                //     'value': 1.45
                // }, {
                //     'name': '数据2',
                //     'value': 2.93
                // }, {
                //     'name': '数据3',
                //     'value': 3.15
                // }, {
                //     'name': '数据4',
                //     'value': 4.78
                // }, {
                //     'name': '数据5',
                //     'value': 5.93
                // }, {
                //     'name': '数据6',
                //     'value': 2.73
                // }, {
                //     'name': '数据7',
                //     'value': 5.73
                // }],
            }]
        };
       option && myChart.setOption(option);

      $(document).ready(function() {
        myChart.resize()
      });
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },
    qxzbEchartsInit(data){
      let chartDom = document.getElementById('qxzbEchartsBox');
      let myChart = echarts.init(chartDom);
      let option = {
          grid: {
              top: '20%',
              containLabel: true
          },
          series: [
              {
                  name: '南丁格尔玫瑰图',
                  type: 'pie',
                  radius: [20, '50%'],
                  center: ['50%', '50%'],
                  roseType: true,
                  itemStyle: {
                      borderRadius: 5,
                      normal: {
                        color: function (params) {
                          var colorList = [
                            '#b3e796', '#e2c538', '#c82c7d', '#ff0000', '#21CCFF',
                            '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                            '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                          ];
                          return colorList[params.dataIndex % colorList.length];
                        }
                      }
                  },
                  label: {
                    formatter:'{b}:\n{d}%',
                    color:'rgba(0,0,0,0.8)',
                    fontSize:16
                  },
                  emphasis: {
                      label: {
                          show: true
                      }
                  },
                  data:data
                  // data: [
                  //     { value: 10, name: 'rose1' },
                  //     { value: 5, name: 'rose2' },
                  //     { value: 15, name: 'rose3' },
                  //     { value: 25, name: 'rose4' },
                  //     { value: 20, name: 'rose5' },
                  //     { value: 35, name: 'rose6' },
                  //     { value: 30, name: 'rose7' },
                  //     { value: 40, name: 'rose8' }
                  // ]
              }
          ]
      };
      option && myChart.setOption(option);

      $(document).ready(function() {
        myChart.resize()
      });
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },
    timeRangeClick(index){
       this.timeIndex = index;

      let timeFlag = "";
       if(index == 0){
          timeFlag = "today";
       }else if(index == 1){
          timeFlag = "yesterday";
       }else if(index == 2){
          timeFlag = "week";
       }else if(index == 3){
          timeFlag = "month";
       }

       this.getGdslNum(timeFlag);
       this.getBgzjNum(timeFlag);
       this.getBgslNum(timeFlag);
       this.getXszeNum(timeFlag);
    },
    formatProgress(percentage) {
      return `${percentage}%`;
    },
    handleCurrentChange(){

    },
    getXszeNum(query="today"){
      request({
        url: '/sale/order/total',
        method: 'get',
        params: {"range":query}
      }).then(res => {
        this.scData.xszeNum = res.data.TOTAL;
        this.scData.xsywcNum = res.data.FINISH;
      });
    },
    getBgzjNum(query="today"){
      request({
        url: '/mes/qc/pending/getNum',
        method: 'get',
        params: {"range":query}
      }).then(res => {
        this.scData.BgzjNum = res.data;
      });
    },
    getScjdTableData(){
      request({
        url: '/mes/pro/workorder/getProgress',
        method: 'get',
        params: {"page":2,"pageSize":9}
      }).then(res => {
        this.tableData = res.rows;
        this.total = res.total;
      });
    },
    getBgslNum(query="today"){
      request({
        url: '/mes/pro/feedback/getNum',
        method: 'get',
        params: {"range":query}
      }).then(res => {
        this.scData.bgslNum = res.data;
      });
    },
    getGdslNum(query="today"){
      request({
        url: '/mes/pro/workorder/getNum',
        method: 'get',
        params: {"range":query}
      }).then(res => {
        this.scData.gdslNum = res.data;
      });
    },
    hbEchartsInit(){
      let chartDom = document.getElementById('echartsBoxXshb');
      let myChart = echarts.init(chartDom);

      let color1 = this.getRandomColor();
      let color2 = this.getRandomColor();

      let option = {
        backgroundColor: "rgba(11, 36, 108, 0)",
        title: {
            text: "",
            textStyle: {
              color: "#4E5969",
              fontSize: 12
            },
        },
        grid: {
            top: 20,
            left: 0,
            right: 0,
            bottom: 0,
            containLabel: true,
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
            },
            backgroundColor: "rgba(9, 24, 48, 0.5)",
            borderColor: "rgba(75, 253, 238, 0.4)",
            textStyle: {
              color: "#FFF",
            },
        },
        xAxis: {
            type: "category",
            data: ["1月", "2月", "3月", "4月", "5月", "6月","7月", "8月", "9月", "10月", "11月", "12月"],
            axisLine: {
              lineStyle: {
                  color: "rgba(60,132,163,0.4)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#4E5969",
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                  type: "lined",
                  color: "rgba(60,132,163,0.2)",
              },
            },
            boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
        },
        yAxis: {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#4E5969",
              fontSize: 12,
              formatter: function (value) {
                  return value + "";
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                  type: "lined",
                  color: "rgba(60,132,163,0.2)",
              },
            },
        },
        series: [
            {
              name: "采购同比",
              type: "line",
              smooth: true,
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: color1[0],
                    },
                    {
                        offset: 1,
                        color: color1[1],
                    },
                  ]),
              },
              lineStyle: {
                  width: 2,
                  color: color1[0],
              },
              showSymbol: true,
              symbol: 'circle',
              symbolSize: 0,
              itemStyle: {
                  color: color1[0],
              },
              data: [26,48,17,36,44,35,22,28,47,10,59, 22]
            },
            {
              name: "采购环比",
              type: "line",
              smooth: true,
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: color2[0],
                    },
                    {
                        offset: 1,
                        color: color2[1],
                    },
                  ]),
              },
              lineStyle: {
                  width: 2,
                  color: color2[0],
              },
              showSymbol: true,
              symbol: 'circle',
              symbolSize: 0,
              itemStyle: {
                  color: color2[0],
              },
              data: [20, 25, 12, 25, 8, 32, 16, 45, 22, 33, 15, 13]
            },
        ]
      };

      option && myChart.setOption(option);

      $(document).ready(function() {
        myChart.resize()
      });
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },
    tbEchartsInit(){
      let chartDom = document.getElementById('echartsBoxXstb');
      let myChart = echarts.init(chartDom);

      let color1 = this.getRandomColor();
      let color2 = this.getRandomColor();

      let option = {
        backgroundColor: "rgba(11, 36, 108, 0)",
        title: {
            text: "",
            textStyle: {
              color: "#4E5969",
              fontSize: 12
            },
        },
        grid: {
            top: 20,
            left: 0,
            right: 0,
            bottom: 0,
            containLabel: true,
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
            },
            backgroundColor: "rgba(9, 24, 48, 0.5)",
            borderColor: "rgba(75, 253, 238, 0.4)",
            textStyle: {
              color: "#FFF",
            },
        },
        xAxis: {
            type: "category",
            data: ["1月", "2月", "3月", "4月", "5月", "6月","7月", "8月", "9月", "10月", "11月", "12月"],
            axisLine: {
              lineStyle: {
                  color: "rgba(60,132,163,0.4)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              color: "#4E5969",
              fontSize: 12,
            },
            splitLine: {
              show: true,
              lineStyle: {
                  type: "lined",
                  color: "rgba(60,132,163,0.2)",
              },
            },
            boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
        },
        yAxis: {
            type: "value",
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#4E5969",
              fontSize: 12,
              formatter: function (value) {
                  return value + "";
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                  type: "lined",
                  color: "rgba(60,132,163,0.2)",
              },
            },
        },
        series: [
            {
              name: "销售同比",
              type: "line",
              smooth: true,
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: color1[0],
                    },
                    {
                        offset: 1,
                        color: color1[1],
                    },
                  ]),
              },
              lineStyle: {
                  width: 2,
                  color: color1[0],
              },
              showSymbol: true,
              symbol: 'circle',
              symbolSize: 0,
              itemStyle: {
                  color: color1[0],
              },
              data: [15, 29, 32, 5, 14, 42, 15, 29, 32, 5, 14, 6]
            },
            {
              name: "销售环比",
              type: "line",
              smooth: true,
              areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: color2[0],
                    },
                    {
                        offset: 1,
                        color: color2[1],
                    },
                  ]),
              },
              lineStyle: {
                  width: 2,
                  color: color2[0],
              },
              showSymbol: true,
              symbol: 'circle',
              symbolSize: 0,
              itemStyle: {
                  color: color2[0],
              },
              data: [20, 25, 12, 25, 8, 62,20, 25, 12, 25, 8, 10]
            },
        ]
      };

      option && myChart.setOption(option);

      $(document).ready(function() {
        myChart.resize()
      });
      window.addEventListener("resize", function() {
        myChart.resize()
      })
    },
    getRandomColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return [`rgba(${r}, ${g}, ${b}, 1)`,`rgba(${r}, ${g}, ${b}, 0)`];
    }
  }
}
</script>

<style lang="scss">
.scjdSection_left .el-table .el-table__header-wrapper th,.scjdSection_left .el-table .el-table__fixed-header-wrapper th{
   background: #FFFFFF!important;
   color: rgba(114, 118, 124, 1);
  //  text-align: center;
}
.scjdSection_left .el-table td{
   color: rgba(29, 33, 41, 1);
   font-weight: bold;
}
</style>

<style lang="scss" scoped>
 @import url("../assets/common/css/animate.css");
 @import url("../assets/common/css/common.css");

$tcbgOpacity:0.8;
$textColor:rgb(25, 236, 255);
$textColor2:rgb(25, 180, 189);
$textColorHd:rgba(25, 236, 255, 0.6);
$textFontSizeBigS:0.18rem;
$textFontSizeBig:0.17rem;
$textFontSizeSm:0.15rem;
$textFontSizeSmV:0.14rem;
$textFontSizeSmS:0.12rem;

#dashboard-editor-container {
  .titleBgStyle{
    background: linear-gradient(180deg, #F7FBFF 0%, #F2F7FF 100%);
    height: 50px;
    width: 100%;
    left:0;
    top:0;
  }
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .tzggBox_lie_text{
    width: 100%;
    height: auto;
    font-size: 14px;
    padding-bottom: 11px;
    span{
      display: inline-block;
      width: 44px;
      height: 20px;
      padding: 1px 2px;
      text-align: center;
    }
    span.tz{
      color: #165DFF;
      background: #E8F3FF;
    }
    span.gg{
      color: #0FC6C2;
      background: #E8FFFB;
    }
    strong{
      display: inline-block;
      width: calc(100% - 54px);
      color: #4E5969;
    }
  }
  #qxzbEchartsBox,#gxbhgEchartsBox,#sczlEchartsBox,#tzggBox{
    width: 100%;
    height: 330px;
  }
  .pageBox{
    text-align: center;
    margin-top: 18px;
  }
  .mt40{
    margin-top: 40px!important;
  }
  .timeRange{
    right: 20px;
    top: 8px;
    z-index: 16;
    &>span{
      cursor: pointer;
      font-size: 16px;
      color: #1D2129;
      line-height: 34px;
      padding: 7px 20px;
      font-weight: bold;
      &.selected{
        background: #3F74F9;
        border-radius: 6px 6px 6px 6px;
        color: #fff;
      }
    }
  }
  .moduleTitle{
    width: 100%;
    height: 35px;
    line-height: 35px;
    font-weight: 600;
    font-size: 14px;
    color: #1D2129;
    letter-spacing: 2px;
    z-index: 1;
    position: relative;
    top: -6px;
  }
  &>.scsjBox{
    width: 100%;
    min-height: 188px;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 16px 20px;
    overflow: hidden;
    .dataNum{
      margin-top: 33px;
      margin-bottom: 16px;
      overflow: hidden;
      &_lie{
        width: 20%;
        height: 77px;
        &_left{
          width: 72px;
          height: auto;
          img{
            display: block;
            width: 72px;
            height: 72px;
          }
        }
        &_right{
          width: 180px;
          height: auto;
          padding-top:2px;
          & div:first-child{
              font-weight: 400;
              font-size: 18px;
              color: #969EAB;
              line-height: 25px;
          }
          & div:nth-child(2){
              font-weight: 700;
              font-size: 32px;
              color: #1D2129;
              line-height: 50px;
          }
        }
      }
    }
  }
  &>.waiSection{
    width: 100%;
    height: auto;
    margin-top: 40px;
    & .echartsFour{
      width: 100%;
      height: auto;
    }
    & .echartsFour_lie{
      width: calc(25% - 29px);
      height: 370px;
      background: #FFFFFF;
      border-radius: 20px 20px 20px 20px;
      box-sizing: border-box;
      padding: 16px 28px;
      overflow: hidden;
    }
    &>.xsthbBox{
      width: calc(50% - 19px);
      height: 405px;
      background: #FFFFFF;
      border-radius: 20px 20px 20px 20px;
      box-sizing: border-box;
      padding: 16px 30px 35px 30px;
      overflow: hidden;
      &>div:nth-child(2){
        width: 100%;
        height: 300px;
        margin-top: 20px;
      }
    }
    & .scjdSection_right{
      width: 405px;
      height: 480px;
      background: #FFFFFF;
      border-radius: 20px 20px 20px 20px;
      box-sizing: border-box;
      padding: 16px 20px;
      overflow: hidden;
      .shortcut_box{
        padding: 0 33px;
        padding-top: 26px;
        text-align: center;
        &_lie{
          width: 60px;
          margin-bottom: 26px;
          margin-right: 30px;
        }
        &_lie:nth-child(3n){
          margin-right: 0;
        }
        img{
          width: 44px;
          height: 44px;
          margin-bottom: 5px;
        }
        & div:nth-child(2){
          font-size: 15px;
          color: #333333;
          line-height: 20px;
        }
      }
    }
    & .scjdSection_left{
      width: calc(100% - 425px - 18px);
      height: 480px;
      background: #FFFFFF;
      border-radius: 20px 20px 20px 20px;
      box-sizing: border-box;
      padding: 16px 20px;
      overflow: hidden;
      & .el-table{
        margin-top: 10px;
        border-top: 1px solid #dfe6ec;
      }
    }
  }
}
</style>
